import React, { Fragment } from 'react';
import ReactEcharts from '@/components/Echarts';
import { Empty } from 'antd';
import styles from '../index.less';

const Bdlz = ({ data }) => {
    console.log('bdlzdata', data);
    const { total = 0, children } = data;
    const getOption = newData => ({
        tooltip: {
            trigger: 'item',
            formatter: '{b}：{c}人'
            // formatter(params) {
            //     const html = `<div><i style="display: inline-block;vertical-align: middle;width:8px;height:8px;border-radius: 100%;margin-right:6px;background:${params.color};"></i><span style="color:#aaa">${params.name}：</span><span>${params.percent}%</span></div>`;
            //     return html;
            // }
        },
        legend: {
            type: 'scroll',
            x: 'center',
            bottom: 0,
            textStyle: {
                color: '#000000A6',
                fontSize: 14
            },
            itemGap: 16,
            data: newData.map(item => item.name)
        },
        series: [
            {
                name: '招聘需求-职级分析',
                type: 'pie',
                radius: '55%',
                center: ['50%', '45%'],
                data: newData,
                label: {
                    show: true,
                    formatter: '{b}：{d}%',
                    textStyle: {
                        color: '#00000073'
                    }
                },
                labelLine: {
                    lineStyle: {
                        color: '#00000073'
                    }
                }
            }
        ]
    });
    return (
        <Fragment>
            <div className={styles.chartTitle}>被动离职总人数：{total}</div>
            {!children || children.length === 0 ? (
                <Empty style={{ padding: '169px 0', margin: '0' }} image={Empty.PRESENTED_IMAGE_SIMPLE} />
            ) : <ReactEcharts style={{ height: '408px' }} option={getOption(children)} />}
        </Fragment>);
};

export default Bdlz;
